<template>
  <div class="tab-bar-item" v-on:click='tItemClick' v-bind:class='{activeColor: isActive}'>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'TabBarItem',
  props: {
    path: String,
  },
  methods: {
    tItemClick() {
      this.$router.push(this.path);
    },
  },
  computed: {
    isActive() {
      return this.$route.path.indexOf(this.path) !== -1;
    },
  },
};
</script>
<style scoped>
  .tab-bar-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
  }
  .activeColor {
    color: #18b4ed;
  }
</style>
